<template>
  <el-button type="primary" @click="questionRuleDialog = true">抽取规则</el-button>
  <el-dialog v-model="questionRuleDialog" title="抽取规则" width="350px">
    <el-form v-model="form" label-width="80px">
      <el-form-item v-for="(type,index) in typeData" :key="index" :label="type.typeName">
        <el-input-number v-model="form[index].needCount" :min="0" :max="type['questionTotal']"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="questionRuleDialog = false">取消</el-button>
        <el-button type="primary" @click="doSubmit" :loading="loading">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { typeList, updateRule } from '@/api/admin'
import { ElMessage } from 'element-plus'

const typeData: any = ref([])
const form: any = reactive([])
typeList().then(resp => {
  typeData.value = resp.data.data
  typeData.value.forEach((type: { questionTypeId: any; needCount: any }) => {
    form.push({
      questionTypeId: type.questionTypeId,
      needCount: type.needCount
    })
  })
})
const questionRuleDialog = ref<boolean>(false)
const loading = ref<boolean>(false)
const doSubmit = () => {
  loading.value = true
  updateRule(form).then(() => {
    ElMessage.success('更新成功')
    questionRuleDialog.value = false
  }).finally(() => {
    loading.value = false
  })
}
</script>

<style scoped>

</style>
